<template>
  <div class="info-detail">
    <div class="header-wrapper">
      <div class="title">
        {{ $route.params.id }}
      </div>
      <div class="time-wrapper">发文时间：[2021-06-23] 浏览次数： 5314</div>
    </div>

    <div class="info-content">
      <div v-html="content"></div>
    </div>
  </div>
</template>
<script>
import json from "./data";
export default {
  data() {
    return {
      json,
      content: ""
    };
  },
  watch: {
    "$route.path"() {
      this.content =
        json[this.$route.params.id] || json["祝贺厦门市思明区建筑行业协会成立"];
    }
  },
  created() {
    this.content =
      json[this.$route.params.id] || json["祝贺厦门市思明区建筑行业协会成立"];
  }
};
</script>

<style lang="less" scoped>
.info-detail {
  background: @white;
  .header-wrapper {
    text-align: center;
    padding: 40px 280px 20px;
    border-bottom: 1px solid @border-color;
    .title {
      color: #0090dd;
      font-size: 20px;
      font-weight: bold;
    }

    .time-wrapper {
      margin-top: 4px;
      color: @text-color-2;
    }
  }

  /deep/.info-content {
    padding: 30px 100px;

    #article {
      p {
        margin-bottom: 10px;
        color: @text-color-1;
        font-size: 15px;
      }
    }
  }
}
</style>
